<template>
	<view>
		<view>
			<view class="top">
				<u-swiper :list="srclist" height='300'></u-swiper>
			</view>
			<view class="content">
				<view class="fwinfo">
					<view class="left">
						<!-- 楼盘名字 -->
						<text class="name">{{name}}</text>
						<!-- 楼盘名字下面的标签 -->
						<view class="tag">
							<u-tag text="在售" borderColor='#fff' color='#de7756' bgColor='#faebe6' size="mini"></u-tag>
							<view class="tagArr" v-for="(item,index) in tagArr" :key='index'>
								<u-tag :text="item" borderColor='#fff' color='#aca8a8' bgColor='#f2f2f2' size="mini">
								</u-tag>
							</view>
						</view>
						<!-- 楼盘价格 -->
						<view class="much">
							{{price}}元/m2
						</view>
						<!-- 开盘时间，楼盘地址 -->
						<view class="timeandsrc">
							<text class="time">开盘时间：</text>
							<view class="lpsrc">
								<text class="time">楼盘地址：</text>
								<text class="lpsrcson">{{lpsrc}}</text>
							</view>

						</view>
					</view>
					<view class="icon">
						<!-- 右边的收藏 -->
						<u-icon :color='iconcolor' :labelColor='iconlabelColor' name='heart' :label='label' @click='sc'
							labelPos='bottom' size='30'></u-icon>
						<u-icon name='arrow-right' label='更多' labelPos='left' size='20'></u-icon>
						<u-button icon='home-fill' size='40' :plain='true' color='blue' type="primary" text="到这儿去">
						</u-button>
					</view>
				</view>
			</view>
			<view class="twobutton">
				<view class="wg">
					<view class="lmcontent">
						<view class="sangedian">
							...
						</view>
						<view class="zzwg">
							<text class="dsr">{{dsr}}人</text>
							<text>正在围观</text>
						</view>
					</view>

				</view>
				<view class="fdjsq">
					<view class="fd">
						<text>房贷计算器</text>
					</view>
				</view>
			</view>

			<view class="hxzs">
				<view class="hxzs1">
					<text>户型展示</text>
				</view>

				<view class="hxtp">
					<view class="dyz">
						<u--image :showLoading="true" :src="this.hxsrc1" width="150px" height="150px">
						</u--image>
						<view class="hxjs">
							<view class="hxt">
								<text>户型图</text>
							</view>
							<view class="hx">
								<text>3室2厅1卫</text>
							</view>
							<view class="jzmj">
								<text>建筑面积约94m2</text>
							</view>
							<view class="yjzxfdsf" @click='yjzx'>
								<text>一键咨询房贷首付</text>
							</view>
						</view>
					</view>
					<view class="dyz">
						<u--image :showLoading="true" :src="this.hxsrc2" width="150px" height="150px">
						</u--image>
						<view class="hxjs">
							<view class="hxt">
								<text>户型图</text>
							</view>

							<view class="hx">
								<text>3室2厅1卫</text>
							</view>
							<view class="jzmj">
								<text>建筑面积约94m2</text>
							</view>
							<view class="yjzxfdsf" @click='yjzx'>
								<text>一键咨询房贷首付</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<view class="nihao">


			</view>


			<!-- 底部导航 -->
			<view class="bottom">
				<u-tabbar :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
					<u-icon @click='fx' name='share' size='30' label='分享' labelPos='bottom'></u-icon>
					<view class="zxzj" @click="zxzx">
						<text class="zxzj1">在线咨询</text>
						<view>
						</view>
						<text class="gw1v1">置业顾问1对1</text>
					</view>
					<view class="mfzd" @click='mfzd'>
						<text class="mfzd1">免费致电</text>
						<view>
						</view>
						<text class="aqbh">安全保护您的隐私
						</text>
					</view>
				</u-tabbar>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 多少人围观
				dsr: '',
				//楼盘地址
				lpsrc: '',
				//楼盘标签数组
				tagArr: [],
				// 楼盘价格
				price: "",
				// 楼盘名字
				name: '',
				// 轮播图地址
				srclist: [],
				// 页面详情数组
				xqlist: {},
				// 户型图片地址
				// 第一张
				hxsrc1: '',
				// 第二张
				hxsrc2: '',
				// icon收藏的文字
				label: '收藏',
				// icon收藏图标的颜色
				iconcolor: '',
				// icon收藏文字的颜色
				iconlabelColor: '',
				// 登录状态
				token: ''
			}
		},
		onLoad(o) {
			if(o){
				let id = o.id
				console.log(id);
				this.$api({
					url:`/lp/lpxq?id=${id}`,
					successCB:res=>{
						this.xqlist=res
						this.srclist = this.xqlist.data.src
						// console.log(this.srclist);
						this.name = this.xqlist.data.name
						this.price = this.xqlist.data.price
						this.tagArr = this.xqlist.data.tag
						this.lpsrc = this.xqlist.data.lpsrc
						this.dsr = this.xqlist.data.dsr
						
					}
					
				})
				return
			}
			this.xqlist = uni.getStorageSync('lpxq')
			console.log(this.xqlist);
			this.srclist = this.xqlist.data.src
			// console.log(this.srclist);
			this.name = this.xqlist.data.name
			this.price = this.xqlist.data.price
			this.tagArr = this.xqlist.data.tag
			this.lpsrc = this.xqlist.data.lpsrc
			this.dsr = this.xqlist.data.dsr
			
			this.hxsrc1 = this.xqlist.data.hxsrc[0]
		
			this.hxsrc2 = this.xqlist.data.hxsrc[1]
		},
		methods: {
			//  点击是否收藏
			sc() {
				if (this.token) {
					if (this.label == '收藏') {
						this.label = '已收藏'
						this.iconcolor = 'skyblue'
						this.iconlabelColor = 'skyblue'
						uni.showToast({
							title: '收藏成功~',
							duration: 1000,
							icon: 'none'
						});
					} else {
						this.iconcolor = ''
						this.iconlabelColor = ''
						this.label = '收藏'
					}
				} else {
					// console.log(123);
					// 去登录页面
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 点击在线咨询
			zxzx() {
				if (this.token) {
					console.log(123);
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 点击免费致电
			mfzd() {
				if (this.token) {
					console.log(123);
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			//点击一键咨询
			yjzx() {
				if (this.token) {
					console.log(123);
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 点击分享
			fx() {
				if (this.token) {
					console.log(123);
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">

	.top {
		padding: 20rpx;
		margin-bottom: 20px;
	}

	.tag {
		display: flex;
		padding: 40rpx 0;


		/deep/.u-tag {
			margin-right: 10rpx !important;
		}
	}

	.u-icon {
		margin-bottom: 100rpx;
	}

	.fwinfo {
		display: flex;
		padding: 20rpx 30rpx;
		justify-content: space-between;

		.icon {
			transform: translateY(-2rpx);
		}

		.name {
			font-size: 40rpx;
			font-weight: bold;

		}

		.much {
			font-size: 50rpx;
			color: red;
			font-weight: bold;
			margin-bottom: 75rpx;
		}

		.time {
			font-size: 32rpx;
			color: #ccc;
		}

		.lpsrcson {
			font-size: 32rpx;
		}
	}

	.wg {
		height: 100rpx;
		width: 350rpx;
		background: #faf5ef;
		margin-right: 10rpx;
	}

	.lmcontent {
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateY(30rpx);
	}

	.sangedian {
		background: orange;
		height: 50rpx;
		width: 50rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.fdjsq {
		height: 100rpx;
		width: 350rpx;
		background-color: #e9f2ee;
		display: flex;
		justify-content: center;
		align-items: center;

		.fd {
			font-weight: bold;
			font-size: 25rpx;
		}
	}

	.twobutton {
		display: flex;
		justify-content: center;
	}

	.zzwg {
		font-size: 30rpx;
	}

	.dsr {
		margin-right: 10rpx;
	}

	.bottom {
		.u-icon {
			transform: translateY(45rpx);
			margin-left: 60rpx
		}

		.zxzj {
			width: 300rpx;
			text-align: center;
			height: 92rpx;
			transform: translateY(5rpx);
			background: #5ed1c2;
			margin-left: 80rpx;
			border-radius: 5px;

			.zxzj1 {
				font-size: 32rpx;
				color: #faf5ef;
			}

			.gw1v1 {
				font-size: 20rpx;
				color: rgba(255, 255, 255, 0.8)
			}
		}

		.mfzd {
			width: 300rpx;
			text-align: center;
			height: 92rpx;
			transform: translateY(5rpx);
			background: #3f6ff9;
			margin-left: 30rpx;
			border-radius: 5px;
			margin-right: 10rpx;

			.mfzd1 {
				font-size: 32rpx;
				color: #faf5ef;
			}

			.aqbh {
				font-size: 20rpx;
				color: rgba(255, 255, 255, 0.8)
			}


		}
	}

	.hxtp {
		display: flex;
		justify-content: center;

		.dyz {
			// background: #fff;
			margin: 20px 85px 20px 15px;
			width: 150rpx;
			height: 300rpx;
		}
	}

	.nihao {
		margin-top: 300rpx;
		height: 28px;
	}

	.hxjs {
		width: 150px;
		margin-top: 20px;
		// background: yellow;

		.hxt {
			margin-bottom: 10rpx;
		}

		.hx {
			font-size: 28rpx;
			color: #ccc;
			margin-bottom: 10rpx
		}

		.jzmj {
			font-size: 28rpx;
			color: #ccc;
			margin-bottom: 30rpx;
		}

		.yjzxfdsf {
			height: 50rpx;
			background: blue;
			text-align: center;
			border-radius: 10rpx;

			text {
				color: #fff;
				font-size: 25rpx;
			}
		}
	}

	.hxzs {
		margin-top: 30rpx;

		.hxzs1 {
			margin-left: 30rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
			}

		}
	}
</style>
